<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="https://img.icons8.com/fluency/96/link.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="theme-color" content="#ffffff" />
    <meta name="description" content="简洁、易用、可定制的链接缩短工具，提供优雅的用户体验" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;500;600&display=swap" rel="stylesheet" />
    <title>短链接生成器 | 简洁、智能</title>
    <style>
      body {
        font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
      }
      
      * {
        box-sizing: border-box;
      }
      
      #root {
        height: 100%;
        width: 100%;
      }
      
      /* 页面加载动画 */
      .apple-loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #f5f5f7;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
      }
      
      .apple-loader.loaded {
        opacity: 0;
        visibility: hidden;
      }
      
      .apple-loader__icon {
        width: 50px;
        height: 50px;
        border-radius: 15px;
        background: linear-gradient(135deg, #147ce5, #2bc4df);
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 8px 16px rgba(20,124,229,0.25);
        animation: pulse 1.5s infinite ease-in-out;
      }
      
      @keyframes pulse {
        0% {
          transform: scale(0.95);
          box-shadow: 0 0 0 0 rgba(20,124,229,0.4);
        }
        70% {
          transform: scale(1);
          box-shadow: 0 0 0 10px rgba(20,124,229,0);
        }
        100% {
          transform: scale(0.95);
          box-shadow: 0 0 0 0 rgba(20,124,229,0);
        }
      }
      
      .apple-loader__icon svg {
        width: 28px;
        height: 28px;
        stroke: white;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <!-- 页面加载动画 -->
    <div class="apple-loader" id="loader">
      <div class="apple-loader__icon">
        <svg viewBox="0 0 24 24">
          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
          <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
        </svg>
      </div>
    </div>
    <script type="module" src="/src/main.tsx"></script>
    <script>
      // 页面加载完成后隐藏加载动画
      window.addEventListener('load', () => {
        setTimeout(() => {
          document.getElementById('loader').classList.add('loaded');
        }, 800);
      });
    </script>
  </body>
</html>
